<template>
  <div class="login-body">
    <!-- Logo区 -->
    <div class="logo">
      <img src="https://p0.meituan.net/travelcube/7c71ecc4b44d0e17447076cd23e501cb31967.png" alt />
    </div>
    <!-- 表单区 -->
    <form>
      <!-- 手机号 -->
      <div class="phone">
        <!-- 左侧布局 -->
        <div class="phone-left">
          <!-- type=tel指的是空间类型为手机号 -->
          <!-- 
                       1、键盘松开keyup --- v-on:keyup
                       2、输入框失焦blur --- v-on:blur
                       3、输入框聚焦foucus --- v-on:focus
          -->
          <input
            type="tel"
            placeholder="请输入手机号"
            @keyup="keyPhone"
            @blur="blurPhone"
            @focus="focusPhone"
            v-model="phone"
          />
        </div>
        <!-- 右侧布局 -->
        <i class="iconfont iconcuo1" v-show="statusPhone" @click="resetPhone"></i>
      </div>
      <!-- 密码 -->
      <div class="pwd">
        <!-- 输入框 -->
        <div class="pwd-left">
          <input
            v-bind:type="[eyeStatus?'password':'text']"
            placeholder="请输入密码"
            @keyup="keyPwd"
            @blur="blurPwd"
            @focus="focusPwd"
            v-model="pwd"
          />
        </div>
        <!-- 叉号 -->
        <i class="iconfont iconcuo1" v-show="statusPwd" @click="resetPwd"></i>
        <!-- 眼睛 -->
        <i 
            v-bind:class="[eyeStatus?'iconfont iconyanjing':'iconfont iconyanjing1']"
            @click="changeEeyStatus"
        ></i>
        <!-- 忘记密码 -->
        <div class="forget-pwd">忘记密码</div>
      </div>
      <!-- 登录按钮 -->
      <div class="login-btn" @click="testPhone">
          登录
      </div>
    </form>
    <!-- 遮罩层mask -->
    <div class="mask" v-show="maskStatus">手机格式错误</div>
    <!-- 底部 -->
    <div class="footer-area">
        登陆即代表您已同意
        <router-link :to="{path:'/'}" tag="span">
            《美团点评用户服务协议》
        </router-link>
        <router-link :to="{path:'/'}" tag="span">
            《隐私政策》
        </router-link>
    </div>
  </div>
</template>
   
<script>
export default {
  data() {
    return {
      statusPhone: false,
      statusPwd: false,
      phone: "",
      pwd:'',
      eyeStatus:true,
      maskStatus:false
    };
  },
  methods: {
    /**1、键盘按下的时候显示，手机号输入框后面的叉号 */
    keyPhone() {
      /* ==、===输入时判断内容是否为空，若为空则隐藏叉号，否则显示叉号*/
      if (this.phone.length === 0) {
        this.statusPhone = false;
      } else {
        this.statusPhone = true;
      }
    },
    /**2、当输入框失去焦点时，绑定实焦事件，隐藏叉号 */
    blurPhone() {
      this.statusPhone = false;
    },
    /**3、当输入框聚焦时，判断输入框里内容是否为空，若为空则不显示叉号，否则显示叉号 */
    focusPhone() {
      /* ==、===输入时判断内容是否为空，若为空则隐藏叉号，否则显示叉号*/
      if (this.phone.length === 0) {
        this.statusPhone = false;
      } else {
        this.statusPhone = true;
      }
    },
    /**4、点击叉号时置空输入框---利用的是v-model双向绑定和Vue数据驱动特性 */
    resetPhone() {
      this.phone = "";
    },
    /**5、键盘按下的时候显示，手机号输入框后面的叉号 */
    keyPwd() {
      /* ==、===输入时判断内容是否为空，若为空则隐藏叉号，否则显示叉号*/
      if (this.pwd.length === 0) {
        this.statusPwd = false;
      } else {
        this.statusPwd = true;
      }
    },
    /**6、当输入框失去焦点时，绑定实焦事件，隐藏叉号 */
    blurPwd() {
      this.statusPwd = false;
    },
    /**7、当输入框聚焦时，判断输入框里内容是否为空，若为空则不显示叉号，否则显示叉号 */
    focusPwd() {
      /* ==、===输入时判断内容是否为空，若为空则隐藏叉号，否则显示叉号*/
      if (this.pwd.length === 0) {
        this.statusPwd = false;
      } else {
        this.statusPwd = true;
      }
    },
    /**8、点击叉号时置空输入框---利用的是v-model双向绑定和Vue数据驱动特性 */
    resetPwd() {
      this.pwd = "";
    },
    /*9、點擊眼睛時進行切換*/
    changeEeyStatus(){
        this.eyeStatus = !this.eyeStatus
    },
    /*10、验证手机号*/
    testPhone(){
        /*正则匹配语法：(正则验证语法).test(验证值)*/
        if(!(/^1[3456789]\d{9}$/).test(this.phone)){
            console.log('手机号格式错误')
            this.maskStatus = true
            /*箭头函数arrow function，优点：其内部不会改动this关键字指向*/
            setTimeout(()=>{
                this.maskStatus = false
            },1000)
            /**
             * 针对快速点击---解决方案 
             *      1、添加遮罩层，防止事件穿透
             *      2、禁止按钮点击disable、readonly
             *      3、****添加事件防抖节流****
             * */
        }else{
            console.log('手机格式正确')
        }
    }
  }
};
</script>
   
<style scoped lang="less">
.login-body {
  width: 100vw;
  height: 100vh;
  background: white;
  overflow: hidden; /**激活元素的BFC属性，该属性即可解决外边距重叠问题---FC格式化上下文 */
  .logo {
    margin: 0.8rem 0;
    text-align: center;
    img {
      width: 2.666667rem;
    }
  }
  form {
    padding: 0.4rem 0.866667rem;
    .phone {
      display: flex; /**弹性布局 */
      font-size: 0.4rem;
      color: #333;
      border-bottom: 1px solid #999;
      height: 1.466667rem;
      line-height: 1.466667rem;
      /*左侧布局*/
      .phone-left {
        flex: 1;
        input {
          outline: none; /**去除轮廓线 */
          border: none; /**去除默认边框 */
          width: 96%;
        }
      }
      i {
        font-size: 0.666667rem;
      }
    }
    .pwd {
      display: flex; /**弹性布局 */
      font-size: 0.4rem;
      color: #333;
      border-bottom: 1px solid #999;
      height: 1.466667rem;
      line-height: 1.466667rem;
      .pwd-left {
        flex: 1;
        input {
          outline: none; /**去除轮廓线 */
          border: none; /**去除默认边框 */
          width: 96%;
        }
      }
      i {
        font-size: 0.666667rem;
      }
      .forget-pwd {
        position: relative; /**相对定位 */
        margin-left: 0.5333rem;
        &::before {
          /*Alt+Z快速将px转为rem*/
          content: "";
          display: block;
          height: 0.5333rem;
          width: 0.0133rem;
          background: #666;
          position: absolute;
          top: 0.4667rem;
          left: -0.2667rem;
        }
      }
    }
    .login-btn{
        width:100%;
        height: 1.333333rem;
        background: #FFD000;
        margin-top: .8rem;
        font-size: .4rem;
        color: #222;
        border-radius: .266667rem;
        text-align: center;
        line-height: 1.333333rem;
    }
  }
  .mask{
      position: fixed;/**固定定位，相对于浏览器窗口定位 */
      width: 40%;
      height: .8rem;
      background: rgba(0,0,0,.3); 
      left:30%; 
      top: 21%;
      border-radius: .133333rem;
      line-height: .8rem;
      text-align: center;
  }
  .footer-area{
      text-align: center;
      width: 100%;
      color: #999;
      font-size: 24px;
      position: fixed;
      bottom: 0.9333rem;
      span{
          color: #FE8C00;
      }
  }
}
</style>